<template>
  <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="max">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input
      id="test"
      class="mui-input-numbox"
      type="number"
      value="1"
      @change="changeCount"
    />
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
</template>

<script>
// 一、导入mui的js
import mui from "../../../lib/js/mui.js"
export default {
  mounted() {
    // 二、初始化组件
    mui.init()
  },
  data() {
    return {}
  },
  // 三、接收传递的max参数
  props: ["max"],

  // 四、监听max的值的变换,当父组件请求到了最大值传递过来后就可以监听的到
  watch: {
    max: {
      handler(newVal) {
        // console.log(newVal)
        // 每当监听到max值的改变,不论这个值是否合法,我们都重新为数字框,使用JS API, 手动设置最大值
        mui(".mui-numbox")
          .numbox()
          .setOption("max", newVal)
      }
    }
  },
  methods: {
    // 五、监听数字框的change事件,拿到最新的count值
    changeCount() {
      // console.log(e.target.value)
      // console.log(
      //   mui(".mui-numbox")
      //     .numbox()
      //     .getValue()
      // )

      // 获取数字框的值的方法,而且做了取整的处理,只需要再做小于1的处理和大于max(库存)的处理即可
      let val = mui(".mui-numbox")
        .numbox()
        .getValue()

      if (val <= 1) {
        val = 1
      }
      if (val >= this.max) {
        val = this.max
      }
      this.$emit("changeCount", val)
    }
  }
}
</script>

<style lang="scss" scoped></style>
